<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/style914.css">
<title>H5前端生成海报</title>
<style>
	#theme_s {
	    position: fixed;
	    font-size: 0.28rem;
	    background-color: rgb(0 0 0 / 83%);
	    right: 10px;
	    bottom: 80px;
	    width: 46px;
	    z-index: 3002;
	    text-align: center;
	    color: #fff;
	    padding: 3px 0;
	}
	.theme-list {
	    width: 80px;
	    background: rgb(0 0 0 / 81%);
	    color: #fff;
	    right: -80px;
	    z-index: 3004;
	    bottom: 110px;
	    position: fixed;
	    font-size: 0.32rem;
	    padding: 0.2rem 0.06rem;
	    transition: 0.3s;
	}

	.theme-list a {
	    display: block;
	    color: #ffffff;
	}

	.theme-list p+p {
	    margin-top: 0.1rem;
	}
	.theme-list.on{
		right: 0px;
	}
	#ok_btn{
		letter-spacing: 2px;
	}
	.bgg-img .r-img img {
	    pointer-events: none;
	}
	#img2-1 {
	    width: 100%;
	    height: 100%;
	    background-color: #fff;
	    display: none;
	    padding: 2%;
	}
	.hd2-txt {
	    text-align: center;
	    font-size: 0.24rem;
	    padding-top: 0.03rem;
	}


</style>


<script>
(function (win,doc){
    // 用原生方法获取用户设置的浏览器的字体大小(兼容ie)
    if(doc.documentElement.currentStyle) {
        var user_webset_font=doc.documentElement.currentStyle['fontSize'];
    }
    else {
        var user_webset_font=getComputedStyle(doc.documentElement,false)['fontSize'];
    }
    // 取整后与默认16px的比例系数
    var xs=parseFloat(user_webset_font)/16;
    var doc = win.document;
    var html = doc.documentElement;
    // defaut 1080px
    var baseWidth = 750; //设计稿的尺寸
    var grids = baseWidth/100,
      resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
      recalc = function() {
        var clientWidth = html.clientWidth || 375; // default to 375 if can't get device-width
        if(clientWidth > 768){
            html.style.fontSize = "100px";
        }else{
            html.style.fontSize = (clientWidth / grids)/xs + 'px';
        }
      };
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    recalc();
})(window,document);
</script>
</head>
<body>

 <div class="page-content-msg on">
 	<div id="view">
 		<div class="img"><img src="static/picture/img1.jpg"></div>
	 	<div class="view-hd1">
	 		<div class="img"><img src="static/picture/img2.jpg"></div>
	 		<div class="hd1-pd">
	 			<div class="hdpd1">
	 				<div class="v2-box">点此输入协会名称</div>
	 				<p>诚邀您莅临参观</p>
	 			</div>
	 			<div class="hdpd2">
	 				<div class="view2-hd-a">
						<a class="a-upload">
							<input class="file-up" type="file" accept="image/*" onchange="showImg(this,1)">
						</a>
						<img src="" alt="" id="img2-1">
					</div>
					<div class="hd2-txt">长按识别二维码<br>获取入场电子凭证</div>
	 			</div>
	 		</div>
	 	</div>
 		<div class="img"><img src="static/picture/img3.jpg"></div>
     
    </div>

     <a id="ok_btn" href="javascript:;">立即生成</a>
    
 </div>

<img src="" id="finalImg">
 <script src="static/js/jquery.min.2.1.4.js"></script>
 <script src="static/js/jquery.qrcode.min.js"></script>
 <script src="static/js/base64.js"></script>
 <script src="static/js/canvas2image.js"></script>
 <script src="static/js/html2canvas.js"></script>
<script src="https://lib.baomitu.com/layer/3.5.0/layer.min.js"></script>

 <script>
 function showImg(obj,a) {
     var file=$(obj)[0].files[0];    //获取文件信息
     var imgdata='';
     if(file)
     {
         var reader=new FileReader();  //调用FileReader
         reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
         reader.onload=function(evt){   //读取操作完成时触发。
             $("#img2-"+a).attr('src',evt.target.result).show();  //将img标签的src绑定为DataURL
             $(obj).parent('.a-upload').hide();
         };
         
     }
     else{
         alert("上传失败");
     }
 }
 	var height = $("#view").height() || 650;
 	var width = $("#view").width();
 	console.log(height,width)
 	var scale = 2;
 	function takeScreenshot(callback) {
 	    var canvas = document.createElement("canvas")
 	    canvas.setAttribute('id','thecanvas');
 	    canvas.width = width * 2;
 	    canvas.height = height * 2;
 	    canvas.style.width = width + "px";
 	    canvas.style.height = height + "px";
 	    var context = canvas.getContext("2d");
 	    context.scale(2,2);

 	    console.log('test');
 	    html2canvas(document.getElementById('view'), {
 	        canvas:canvas,
 	        onrendered: function(canvas) {
 	            document.body.appendChild(canvas);
 	            callback()
 	        },
 	    });
 	    // console.log("a完成")
 	}
 	function canvastoImg(canvas,id){
 	  // console.log(canvas,"b开始")
 	 
 	    var image = new Image();
 	    image.src = canvas.toDataURL("image/png");
 	    $("#" + id).attr('src',image.src);
 	    $(".imgSrc").text(image.src);
 	    return image;
 	  
 	}

	$(function(){
		$('input[type=text]').blur(function(){
			$(this).css({
				'border':'none'
			})
		})
		$('#uname_isup').click(function(){
			console.log('ok111');
		})

		$('.v2-box').click(function(){
			layer.prompt({title: '请输入协会名称,并确认', formType: 0}, function(text1, index){
			  layer.close(index);
			  $('.v2-box').text(text1);
			});
		})
		/*
		$('.bt-yyr').click(function(){
			layer.prompt({title: '请输入邀约人姓名,并确认', formType: 0}, function(text1, index){
				layer.close(index);
				layer.prompt({title:'请输入邀约人手机号,并确认',formType:0},function(text2, index){
					layer.close(index);
					$('.yyr-box').text(text1);
					$('.yyrphone-box').text(text2);
				})
			  
			});
		})
		*/
		$('#ok_btn').click(function(){
			$('html ,body').animate({
			    scrollTop: 0
			}, 0);
			
			if($('.v2-box').text() == '点此输入协会名称'){
				layer.alert('请输入协会名称！',{title:'温馨提示：',icon:5});
				return false;
			}

			if($('input[type=file]').val() == ''){
				layer.alert('您还没有上传渠道二维码！',{title:'温馨提示：',icon:5});
				return false;
			} 
			console.log('click ok');
			setTimeout(takeScreenshot(function(){
				canvastoImg(document.getElementById("thecanvas"),'finalImg');

			}),1000);
			layer.alert('生成成功，长按图片保存至手机相册！',{icon:6},function(index){
				layer.close(index);
				$('#finalImg').css({
					'opacity':1,
					'transform': 'scale(0.88)'
				})
				$('body').append('<div class="fix-mask"></div>');
			});

		})
		

	})
 </script>
</body>
</html>
